<fieldset>
  <legend class="sr-only">Checkboxes</legend>

  <div class="flex flex-col items-start gap-3">
    <label for="Option1" class="inline-flex items-center gap-3">
      <input
        type="checkbox"
        class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
        id="Option1"
      />

      <span class="font-medium text-gray-700 dark:text-gray-200"> Option 1 </span>
    </label>

    <label for="Option2" class="inline-flex items-center gap-3">
      <input
        type="checkbox"
        class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
        id="Option2"
      />

      <span class="font-medium text-gray-700 dark:text-gray-200"> Option 2 </span>
    </label>

    <label for="Option3" class="inline-flex items-center gap-3">
      <input
        type="checkbox"
        class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
        id="Option3"
      />

      <span class="font-medium text-gray-700 dark:text-gray-200"> Option 3 </span>
    </label>
  </div>
</fieldset>
